var winScrollTop=$(window).scrollTop(),winWidth=$(window).width(),winHeight=$(window).height();
var swipePage = null,timelineSwiper = null,isTimelineAutoPlay=false;
var choosePie = null,// 转动饼图实例
choosePieIndex=chooseList.length, // 当前饼图高亮索引 
choosePieHover=false,// 饼图是否hover
choosePieStartAngle = -210;
var mapChart = null; // 地图实例
var timeAutoChoosePie = null; // 自动轮播饼图
// 时间轴
function timeline(){
    if(timelineSwiper){
        clearTimeline()
    }
    timelineSwiper = new Swiper('#timeline-swiper', {
        slidesPerView: 4,
        spaceBetween: 105,
        direction: 'horizontal',
        preventInteractionOnTransition:true, // 当你的Swiper在过渡时将无法滑动
        speed:3500, //缓慢滚动的情况下，不能停止快速停止滚动
        autoplay: {
            delay: 3500, // 2500
            // disableOnInteraction: false,
            // pauseOnMouseEnter:true,
            // stopOnLastSlide:true
        },
        resizeObserver:true,
        on:{
            slideChangeTransitionEnd: function(){
                // 减去4是因为slidesPerView为4
                if(this.activeIndex === (this.slides.length-4)){
                    timelineSwiper.slideTo(0,100,false)
                    setTimeout(()=>{
                        timelineSwiper.autoplay.start()
                    },100)
                }
                // console.log(this.activeIndex)
                //   alert('改变了，activeIndex为'+);
            }
        }
        // centeredSlides: true
    });
    // 默认禁用
    // timelineSwiper.disable()
}
// 清除时间轴滑动效果
function clearTimeline(){
    if(timelineSwiper!=null){
        timelineSwiper.destroy(true);
        timelineSwiper = null;
    }
}
// 设置导航栏类
function setNavBarClass(){
    var navBar = $('.syy-nav');
    if(winScrollTop> 20 || winWidth < 1036){
        navBar.addClass('navRed')
    } else {
        navBar.removeClass('navRed')
    }
}
// 设置饼状图
function setChoosePie(){
    var chartDom = document.getElementById('choose-pie');
    if(choosePie){
        choosePie.dispose();
        choosePie = null;
        choosePieIndex=chooseList.length;
    }
    choosePie = echarts.init(chartDom);
    var option = {
        tooltip: {
            show: false,
            trigger: 'item'
        },
        legend: {
            show: false
        },
        color: ['#7e2030','#b17982','#999999']
    }
    if(winWidth >MOBILEWIDTH){
        option.series = [
            {
                name: '选择我们',
                type: 'pie',
                radius: ['75%', '95%'],
                // center: ["85%", "50%"],
                avoidLabelOverlap: false,
                hoverAnimation:true,
                animationDurationUpdate:800,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#F5F6F6',
                    borderWidth: 20,
                },
                label: {
                    show: false
                },
                emphasis:{
                    disabled: true,
                },
                // selectedMode:true,
                // select: {
                //     label: {
                //         show: false
                //     },
                //     itemStyle:{
                //         borderWidth:20,
                //         borderRadius: 0,
                //         borderColor: '#F5F6F6',
                //         color:"#7E2030"
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: chooseList
            }
        ]
    }else {
        option.series = [
            {
                name: '选择我们',
                type: 'pie',
                radius: ['70%', '95%'],
                // center: ["85%", "50%"],
                avoidLabelOverlap: false,
                hoverAnimation:true,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#F5F6F6',
                    borderWidth: 20,
                    // color: '#E5D2D6'
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis:{
                    disabled: true,
                },
                // selectedMode:true,
                // select: {
                //     label: {
                //         show: false
                //     },
                //     itemStyle:{
                //         borderWidth:20,
                //         borderRadius: 10,
                //         borderColor: '#F5F6F6',
                //         color:"#7E2030"
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: chooseList
            }
        ]
    }
    option && choosePie.setOption(option);
    downChoosePie()
}
// 设置中国地图
function setChinaMap(){
var chartDom = document.getElementById('china-map');
mapChart = echarts.init(chartDom);
echarts.registerMap('China', chinaJSON);
mapChart.setOption({
    title:{
        show:false
    },
    tooltip: {
        show:false,
        trigger: 'item',
    },
    grid:{
        top:10
    },
    // geo: {
    //     map: 'China'
    // },
    series: [
        {
            name: '中国地图',
            type: 'map',
            map: 'China',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
                show: false,
            },
            zoom: 1.23,
            itemStyle: {
                normal: {
                    areaColor: '#B0B0B0', // 地区板块的颜色
                    // borderColor: '#fff', // 地区之间边框的颜色
                    borderWidth: 1
                },
                emphasis: {
                    show: true,
                    areaColor: '#7E2030',//鼠标滑过区域颜色
                    label: {
                        show: true,
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
            },
            // areaStyle: {
            //     normal: {
            //         // 隐藏海南岛
            //         海南岛: {
            //             areaColor: 'rgba(0,0,0,0)'
            //         }
            //     }
            // },
            // aspectScale: 0.75,
            // zoom: 1.2,
            data: []
        }
    ]
});
}
// 设置body的class,通过class来控制样式
function setBodyClass(){
    // 手机屏幕
    if(winWidth <= MOBILEWIDTH){
        $('body').addClass('is-mobile')
        setSwiperPage()
        clearTimeline()
    } else {
        $('body').removeClass();
        clearSwiperPage()
        timeline()
    }
}
// 设置swiperPage
function setSwiperPage(){
    if(swipePage){
        return false;
    }
    $('#swiper-page').addClass('swiper-container')
    $('.swiper-page-wrap').addClass('swiper-wrapper')
    $('.mobile-section').addClass('swiper-slide')
    swipePage = new Swiper("#swiper-page", {
        direction: "vertical",
        on:{
            slideChange: function(){
                if(this.activeIndex === 3 && choosePie){
                    choosePie.resize()
                    // timeAutoChoosePie = setInterval(downChoosePie,1000);
                }else {
                    // if(timeAutoChoosePie){
                    //     clearInterval(timeAutoChoosePie)
                    //     timeAutoChoosePie = null;
                    // }
                }
                if(this.activeIndex === 4 &&mapChart){
                    mapChart.resize()
                }
            //   alert('改变了，activeIndex为'+);
            }
        }
    });
}
// 清除swiperPage
function clearSwiperPage(){
    if(swipePage==null){
        return false;
    }
    $('#swiper-page').removeClass('swiper-container')
    $('.swiper-page-wrap').removeClass('swiper-wrapper')
    $('.mobile-section').removeClass('swiper-slide')
    swipePage.destroy(true);
    swipePage = null;
}
/**
 * 文字渐隐渐显
 * @param {HTMLElement} ele 包裹文字的父元素,可以通过$获取
 * @param {boolean} flag true显示、false隐藏
 */
function textFadeToogle(ele,flag){
    var opacity = $(ele).find('span').eq(0).css('opacity')
    // 显示
    if(flag){
        if(opacity != 0){
            return false;
        }
        $.each($(ele).find('span'),function(index,eleItem){
            // 偶数
            if(((index+1) % 2) == 0){
                $(eleItem).fadeTo(2000,1)
            } else {
                $(eleItem).fadeTo(1200,1)
            }
        })
    }else{
        if($(ele).find('span').eq(0).css('opacity') == 0){
            return false;
        }
        $(ele).find('span').css({'opacity':0})
    }
}
/**
 * 页面向下滚动choosePie
 */
function downChoosePie(){
    if(choosePie==null){
        return false;
    }
    // 第一个图例的旋转角度（不可更改）
    if (choosePieIndex !== chooseList.length) {
        // 取消高亮
        choosePie.dispatchAction({
            type: 'unselect',
            seriesIndex: 0, // 图表中的第一个系列
            dataIndex: choosePieIndex // 图表中的第一个索引
        });
        console.log("取消高亮索引："+choosePieIndex)
    }
    choosePieIndex--;
    console.log(choosePieIndex,'scrollChoosePie')
    // 滚动一次的距离
    choosePieStartAngle = choosePieStartAngle - (360/chooseList.length);
    choosePie.setOption({
        series:[{
            startAngle:choosePieStartAngle
        }]
    });
    choosePie.dispatchAction({
        type: 'select',
        seriesIndex: 0,
        dataIndex: choosePieIndex
    });
    console.log("高亮索引："+choosePieIndex)
    // 更改文字和图标
    var currentItem = chooseList[choosePieIndex];
    $('#choose-h3').html(currentItem.title)
    $('#choose-img').attr('src',currentItem.icon)
    $('#choose-p').html(currentItem.text)
    $('#choose-pie-text').html(currentItem.name2)
    if(choosePieIndex === 0){
        choosePieIndex = chooseList.length;
    }
}
// function downChoosePie2(){
//     if(choosePie==null){
//         return false;
//     }
//     // 第一个图例的旋转角度（不可更改）
//     var startAngle = -210;
//     if(choosePieIndex != 0){
//         if (choosePieIndex !== chooseList.length) {
//             // 取消高亮
//             choosePie.dispatchAction({
//                 type: 'unselect',
//                 seriesIndex: 0, // 图表中的第一个系列
//                 dataIndex: choosePieIndex // 图表中的第一个索引
//             });
//             console.log("取消高亮索引："+choosePieIndex)
//         }
//         choosePieIndex--;
//         console.log(choosePieIndex,'scrollChoosePie')
//         choosePie.setOption({
//             series:[{
//                 startAngle:startAngle - ((chooseList.length-choosePieIndex-1) * 60)
//             }]
//         });
//         choosePie.dispatchAction({
//             type: 'select',
//             seriesIndex: 0,
//             dataIndex: choosePieIndex
//         });
//         console.log("高亮索引："+choosePieIndex)
//         // 更改文字和图标
//         var currentItem = chooseList[choosePieIndex];
//         $('#choose-h3').html(currentItem.title)
//         $('#choose-img').attr('src',currentItem.icon)
//         $('#choose-p').html(currentItem.text)
//         $('#choose-pie-text').html(currentItem.name)
//     } else {
//         return false;
//     }
// }
// 防抖函数
function fangdou(fn,wait){
    console.log('执行防抖')
    var timeOut = null;
    return function(){
        if(timeOut!=null){
            clearTimeout(timeOut);
        };
        timeOut = setTimeout(fn,wait)
    }
};
/**
 * 元素是否在可识区域内
*/
function viliDom(dom){
    // 页面向上滚动时
    var isUp = winScrollTop>($(dom).offset().top+$(dom).outerHeight());
    // 页面向下滚动时
    var isDown = winScrollTop<($(dom).offset().top-$(window).height())
    return !(isUp || isDown)
}
$(function () {
    timeAutoChoosePie = setInterval(downChoosePie,2000);
    setNavBarClass()
    setChinaMap()
    setChoosePie()
    setBodyClass()
    $(window).scroll(function(event){
        //滚动的高度
        winScrollTop=$(this).scrollTop();
        setNavBarClass()
        textFadeToogle('#what-title',viliDom('#what-title'))
        if(timelineSwiper){
            if(viliDom('#timeline-swiper')){
                // console.log('启用时间轴')
                timelineSwiper.enable()
            }else{
                timelineSwiper.disable()
                timelineSwiper.disable('禁用时间轴')
            }
        }
        
    });
    $(window).resize(function(){
        setBodyClass()
        setChoosePie()
        winWidth = $(window).width();
        winHeight = $(window).height();
        // 在这里编写窗口尺寸变化时的处理代码
        setNavBarClass()
        mapChart.resize()
        // 窗口发生变化时，并且为pc端大小
        // if(timeAutoChoosePie && winWidth <= MOBILEWIDTH){
        //     clearInterval(timeAutoChoosePie);
        // }
    });
    // 下一页
    $('.mobile-down').click(function(){
        if(swipePage!=null){
            swipePage.slideNext()
        }
    })
    // 返回顶部
    $('#back-top').click(function(){
        if(swipePage!=null){
            swipePage.slideTo(0,1,false)
        }
    })
    // 鼠标移入/移出饼图
    // $("#choose-pie").hover(function(){
    //     choosePieHover= true;
    // },function(){
    //     choosePieHover= false;
    // })
    // 鼠标滚轮事件
    // document.addEventListener('mousewheel', function(e) {
    //     // var chooseTop = $(window).scrollTop() - $('.syy-choose').offset().top;
    //     // var isVili = viliDom('.syy-choose');
    //     // winWidth>768为pc端样式
    //     // if(chooseTop >0 && chooseTop< 100 && isVili && choosePieIndex!==1 && winWidth > MOBILEWIDTH){
    //     //     awaitDownChoosePie()
    //     //     e.preventDefault();
    //     // }
    //     if(choosePieHover && winWidth > MOBILEWIDTH){
    //         awaitDownChoosePie()
    //         e.preventDefault();
    //     }
    //  },{passive: false});
	$(".scrollToTop").click(function(){
        $('html').animate({ scrollTop: 0 }, 500);
    });
    $('.navbar-nav .dropdown').hover(function(){
        if(winWidth > MOBILEWIDTH){
            $(this).addClass('open')
        }
    },function(){
        if(winWidth > MOBILEWIDTH){
            $(this).removeClass('open')
        }
    })
    document.addEventListener("WeixinJSBridgeReady", function() {
        document.getElementById('exhibition-video').play();
    }, false);
    window.onerror = function(message, source, lineno, colno, error) {
        // alert(message)
        console.log('捕获到的错误信息是：', message, source, lineno, colno, error )
     }
    // var swiperPage = new Swiper(".swiper-page", {
    //     direction: "vertical",
    // });
});